<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /* css 代码  */
    </style>
    <script src="js/highcharts.js"></script>
    <script src="js/exporting.js"></script>
    <script src="js/heatmap.js"></script>
    <script src="js/treemap.js"></script>
    <script src="js/highcharts-zh_CN.js"></script>
    <script src="js/sand-signika.js"></script>
</head>
<body>
<div id="container"></div>
<!--[if lt IE 9]>
<script src="js/oldie.js"></script>
<![endif]-->
<script>
    // JS 代码

    var chart = Highcharts.chart('container', {
        colorAxis: {
            minColor: '#FFFFFF',
            maxColor: Highcharts.getOptions().colors[0]
        },
        series: [{
            type: "treemap",
            layoutAlgorithm: 'squarified',
            data: [{
                name: 'A',
                value: 6,
                colorValue: 1
            }, {
                name: 'B',
                value: 6,
                colorValue: 2
            }, {
                name: 'C',
                value: 4,
                colorValue: 3
            }, {
                name: 'D',
                value: 3,
                colorValue: 4
            }, {
                name: 'E',
                value: 2,
                colorValue: 5
            }, {
                name: 'F',
                value: 2,
                colorValue: 6
            }, {
                name: 'G',
                value: 1,
                colorValue: 7
            }]
        }],
        // title: {
        //     text: '矩形树图'
        // }
    });

</script>
</body>
</html>